<template>
  <div>
    <div class="top">
      <el-form :inline="true">
        <!-- <el-form-item>
          <el-select v-model="value1" :Popper-append-to-body="false">
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-select v-model="value1" :Popper-append-to-body="false">
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" @click="search"> </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-input placeholder="岗位" v-model="input3" class="searchInput">
            <template #suffix>
              <i class="iconfont iconfangdajing" @click="search"></i>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <el-button class="add" size="small" @click="addPost" type="primary">新增</el-button>

      <!-- <el-button class="add" size="small" @click="addPostEmployee" type="primary">新增岗位员工</el-button> -->
    </div>
    <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%;" @selection-change="handleSelectionChange(scope.row.postCode)">
      <el-table-column align="center" type="selection" width="55"> </el-table-column>
      <el-table-column align="center" label="编号" width="120">
        <template v-slot="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column align="center" prop="postName" label="岗位名称" show-overflow-tooltip> </el-table-column>
      <el-table-column align="center" label="创建时间" sortable :show-overflow-tooltip="true">
        <template v-slot="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createBy" label="创建人"> </el-table-column>

      <el-table-column align="center" prop="count" label="员工" sortable> </el-table-column>
      <el-table-column align="center" prop="status" label="状态" width="120">
        <template v-slot="scope">
          <el-switch v-model="scope.row.enable"   @click="enablePost(scope.row.postCode)" active-color="#fff" inactive-color="#f0f0f0" :class="{ 'switch-is-actived': scope.row.enable }"> </el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="180" fixed="right">
        <template #header>
          操作&emsp;
          <i class="el-icon-s-operation"></i>
        </template>
        <template v-slot="scope">
          <i class="iconfont iconshanchu1" @click="deletePost(scope.row.postCode)"></i>
          &emsp;
          <i class="iconfont iconbianji" @click="eidtPost(scope.row.postCode)"></i>
          &emsp;
          <i class="iconfont iconicon_public_crumbs" @click="showStaff(scope.row)"></i>
          &emsp;
          <i class="iconfont iconjia" @click="addStaff(scope.row.postCode)"></i>
        </template>
      </el-table-column>
    </el-table>

    <pagiNation :totalData="total" :currentPage="currentPage" :pageSize="pageSize" />

    <el-dialog title="新增岗位" v-model="dialogVisible" width="50%" close-on-press-escape top="0" :close-on-click-modal="false" class="addPost">
      <!-- <span class="step"><i>1</i> 基础设置</span><span class="step"><i>2</i> 确认完成</span> -->
      <el-form :model="form" :rules="rules" ref="ruleForm" size="small" class="postForm">
        <el-form-item label="岗位名称" label-width="100px" prop="stationName" label-position="right">
          <el-input v-model="form.stationName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div class="treeNdoe">
        <div class="father">
          <p>选择权限</p>
          <div class="left">
            <p>菜单列表</p>
            <el-tree :data="initMenuList" @node-click="handleNodeClick" @check="handleNodeClick" show-checkbox node-key="id" ref="tree" highlight-current :props="defaultProps"> </el-tree>
          </div>
          <div class="right" v-show="true">
            <ul>

              <li>
        <!-- <el-checkbox :indeterminate="isBtnIndeterminate" v-model="btnCheckAll" @change="handleCheckBtnAllChange">全部功能</el-checkbox>
        <el-checkbox :indeterminate="isAttrIndeterminate" v-model="attrCheckAll" @change="handleCheckAttrAllChange">全部属性</el-checkbox> -->
                </li>
              <li v-for ="item in authList.data" :key="item.dataListId">
                 {{item.dataListName}}
                 
            <div>
              <p>功能权限</p>
               
                <el-checkbox-group v-model="item.btn" >
                  <el-checkbox v-for ="btn1 in item.btn" :key="btn1.buttonId"  :label="btn1.buttonName"  >
                    {{btn1.buttonName}}
                  </el-checkbox>
                </el-checkbox-group>
            </div>

            <p>属性查看权</p>
            <div>
              <el-checkbox-group v-model="attrList" @change="handleCheckArrAllChange">
                <el-checkbox v-for ="attr in item.attr" :label="attr.dataColumnId" :key="attr.dataListAttrCode">{{attr.dataListNickName}}</el-checkbox>
              </el-checkbox-group>
            </div>
             <el-divider></el-divider>
            </li>
            </ul>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button plain @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 编辑岗位 -->
    <el-dialog title="编辑岗位" v-model="editDialog" width="50%" close-on-press-escape top="0" :close-on-click-modal="false" class="editPost">
      <!-- <span class="step"><i>1</i> 基础设置</span><span class="step"><i>2</i> 确认完成</span> -->
      <!-- <el-form :model="formEdit" :rules="rules" ref="ruleForm" size="small" class="postForm"> -->
      <!-- <el-form-item label="岗位名称" label-width="100px" prop="stationName" label-position="right">
          <el-input v-model="form.stationName" autocomplete="off"></el-input>
        </el-form-item> -->

      <!-- <el-form-item label="企业类型" label-width="100px" prop="businessType" label-position="right">
          <el-select v-model="form.businessType">
            <el-option value="品牌企业" label="品牌企业"></el-option>
            <el-option value="品牌企业" label="商家企业"></el-option>
          </el-select>
        </el-form-item> -->
      <!-- <el-form-item label="选择权限" label-width="100px" class="permission"> -->

      <div class="treeNdoe">
        <div class="father">
          <p>选择权限</p>
          <div class="left">
            <p>菜单列表</p>
            <el-tree :data="menuList" @node-click="handleNodeClick" node-key="id" ref="tree" highlight-current :props="defaultProps"> </el-tree>
          </div>
          <div class="right" v-show="true">
            <div>
              <p>功能权限</p>
              <div>
                <el-checkbox>全部功能</el-checkbox>
                <el-checkbox>删除</el-checkbox>
                <el-checkbox>新增</el-checkbox>
              </div>
            </div>

            <p>属性查看权</p>
            <div>
              <p>品牌列表</p>
              <div>
                <el-checkbox>全部</el-checkbox>
                <el-checkbox>电话号码</el-checkbox>
                <el-checkbox>姓名</el-checkbox>
                <el-checkbox>地址</el-checkbox>
              </div>
            </div>
            <div>
              <p>门店列表</p>
              <div>
                <el-checkbox>全部</el-checkbox>
                <el-checkbox>电话号码</el-checkbox>
                <el-checkbox>姓名</el-checkbox>
                <el-checkbox>地址</el-checkbox>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button plain size="mini" @click="editDialog = false">取 消</el-button>
          <el-button type="primary" size="mini" v-on:childValue="childValue($event)">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 员工列表 -->
    <el-dialog title="员工列表" v-model="staffDialog" width="50%" close-on-press-escape top="0" :close-on-click-modal="false">
      <el-form>
        <el-form-item label="岗位名称">
          <el-input v-model="postName" disabled></el-input>
        </el-form-item>
        <el-form-item label="员工明细">
          <el-table :data="staffDetailTable" border style="width: 60%;">
            <el-table-column prop="employeeCode" align="center" label="编号" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="employeeName" align="center" label="姓名"></el-table-column>
            <el-table-column prop="phone" align="center" label="手机号"></el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 添加员工 -->
    <el-dialog title="添加员工" class="addStaff" v-model="addStaffDialog" width="50%" close-on-press-escape top="0" :close-on-click-modal="false">
      <el-form :inline="true">
        <el-form-item style="border: 1px solid #ccc; padding: 8px; box-sizing: border-box; border-radius: 10px; width: 43%;">
          <p>未选择</p>
          <search style="margin-bottom: 10px;" />
          <el-table :data="chooseTable" border class="left" max-height="700px" @selection-change="handleLeftChange">
            <el-table-column type="selection" align="center"> </el-table-column>
            <el-table-column prop="num" label="编号" align="center" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="name" label="姓名" align="center" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="post" label="岗位" align="center" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="phone" label="手机号" align="center" :show-overflow-tooltip="true"></el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item class="btn" style="margin-top: 30%;">
          <el-button size="mini" @click="PutDataToLeft">←放左边</el-button><br />
          <el-button size="mini" @click="PutDataToRight">放右边→</el-button>
        </el-form-item>
        <el-form-item style="border: 1px solid #ccc; padding: 8px; box-sizing: border-box; border-radius: 10px; width: 43%;">
          <p>已选择</p>
          <search style="margin-bottom: 10px;" />
          <el-table :data="nochooseTable" border class="left" style="width: 100%;" max-height="700px" @selection-change="handleRightChange">
            <el-table-column type="selection" width="35"> </el-table-column>
            <el-table-column prop="num" label="编号" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="name" label="姓名" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="post" label="岗位"></el-table-column>
            <el-table-column prop="phone" label="手机号" :show-overflow-tooltip="true"></el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button plain size="mini" @click="addStaffDialog = false">取 消</el-button>
          <el-button type="primary" size="mini">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="新增岗位员工" v-model="transferDia" width="90%" close-on-press-escape top="0" :close-on-click-modal="false">
      <el-form :inline="true">
        <el-form-item style="border: 1px solid #ccc; padding: 8px; box-sizing: border-box; border-radius: 10px; width: 43%;">
          <p>未选择</p>
          <search style="margin-bottom: 10px;" />
          <el-table :data="choosePostTable" border class="left" max-height="700px" @selection-change="handleLeftPostChange"
            >
            <el-table-column type="selection" align="center"> </el-table-column>
            <el-table-column prop="employeeCode" label="编号" align="center" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="employeeName" label="姓名" align="center" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="postName" label="岗位" align="center" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="phone" label="手机号" align="center" :show-overflow-tooltip="true"></el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item class="btn" style="margin-top: 30%;">
          <el-button size="mini" @click="PutPostDataToLeft">←放入左边</el-button><br />
          <el-button size="mini" @click="PutPostDataToRight">放入右边→</el-button>
        </el-form-item>
        <el-form-item style="border: 1px solid #ccc; padding: 8px; box-sizing: border-box; border-radius: 10px; width: 43%;">
          <p>已选择</p>
          <search style="margin-bottom: 10px;" />
          <el-table :data="nochoosePostTable" border class="left" style="width: 100%;" max-height="700px" @selection-change="handleRightPostChange">
            <el-table-column type="selection" align="center"> </el-table-column>
            <el-table-column prop="employeeCode" label="编号" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="employeeName" label="姓名" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="postName" label="岗位"></el-table-column>
            <el-table-column prop="phone" label="手机号" :show-overflow-tooltip="true"></el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button plain size="mini" @click="transferDia = false">取 消</el-button>
          <el-button type="primary" size="mini" @click="distribution">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import { getPostPage, distributionEmployee,delPost, addNewPost, getPerTree, fnPermission, viewRight, getEmployee, getEnterprise,postEnable } from '@/api/comparePost'

import pagiNation from '@/components/Pagination/index'
import dropDown from '@/components/DropdownPublic/index'
import search from '@/components/Search/index.vue'
// import treeNode from './component/treeNode'
import { ElMessage } from 'element-plus'
// onMounted
export default {
  components: {
    pagiNation,
    // treeNode,
    dropDown,
    search
  },
  data() {
    return {
      obj: {
        systemId: '',
        parentMenuId: '',
        menuName: '',
        menuType: ''
      },
      checkArr: [],
      checkedleft: [],
      checkedRight: [],
      checkedPostleft: [],
      checkedPostRight: [],
      typesData: [],
      typesAttrData: {},
      typesAuthData: {},
      typesMenuData: {},
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const res = await addNewPost({ postName: this.form.stationName })
          this.postCode = res.data
          if (res.code === 200) {
            ElMessage({ type: 'success', message: '新增岗位成功!' })
            console.log(res)
            
            this.dialogVisible = false
          this.nochoosePostTable = []
          this.transferDia = true
          const res = await getEnterprise()
          if (res.code === 200) {
            this.choosePostTable = res.data.data
            console.log(res)
          }
          }
        } else {
          ElMessage({ type: 'error', message: '岗位名称不合法' })
          return false
        }
      })
      
    },

    

     handleCheckBtnAllChange(val){
      this.btnList = val ? this.btnList : [];
        this.isBtnIndeterminate = false;
    },
    handleCheckAttrAllChange(val){
      this.attrList = val ? this.attrList : [];
        this.isAttrIndeterminate = false;
    },
    
    // handleNodeClick(data) {
    //   console.log(data)
    // },
    getAddCheck() {
      const res = this.$refs.tree.getCheckedNodes(true, true)
      console.log(res)
      var arr = []
      var arr1 = []
      var arr2 = []
      var arr3 = []
      res.forEach((item) => {
        arr.push(item.menuName)
        arr1.push(item.parentMenuId)
        arr2.push(item.systemId)
        arr3.push(item.menuType)
      })
      // this.obj.menuName = arr
      this.obj.menuName = Array.from(new Set(arr))
      this.obj.parentMenuId = Array.from(new Set(arr1))
      this.obj.systemId = Array.from(new Set(arr2))
      this.obj.menuType = Array.from(new Set(arr3))
      console.log(this.obj)
    },
    handleLeftChange(val) {
      this.checkedleft = val
      console.log(this.checkedleft)
    },
    handleRightChange(val) {
      this.checkedRight = val
      console.log(this.checkedRight)
    },
    deletePost(id) {
      this.$confirm('确定删除此岗位吗?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
        .then(async () => {
          const res = await delPost({ code: id })
          if (res.code === 200) {
            this.staffDetailTable = res.data
          }
        })
        .catch(() => {
          ElMessage({ type: 'error', message: '删除失败' })
        })
    },
      
    PutDataToRight() {
      console.log(JSON.parse(JSON.stringify(this.checkedleft)))
      this.nochooseTable = this.handleConcatArr(this.nochooseTable, this.checkedleft)
      this.handleRemoveTabList(this.checkedleft, this.chooseTable)
      console.log(this.chooseTable)
      this.checkedleft = []
    },
    PutDataToLeft() {
      this.chooseTable = this.handleConcatArr(this.chooseTable, this.checkedRight)
      this.handleRemoveTabList(this.checkedRight, this.nochooseTable)
      this.checkedRight = []
    },
    //新增岗位员工方法 
    handleLeftPostChange(val) {
      this.checkedPostleft = val
      console.log(this.checkedPostleft)
    },
    handleRightPostChange(val) {
      this.checkedPostRight = val
      console.log(this.checkedPostRight)
    },
    PutPostDataToRight() {
      console.log(JSON.parse(JSON.stringify(this.checkedPostleft)))
      this.nochoosePostTable = this.handleConcatArr(this.nochoosePostTable, this.checkedPostleft)
      this.handleRemoveTabList(this.checkedPostleft, this.choosePostTable)
      console.log(this.chooseTable)
      this.checkedPostleft = []
    },
    PutPostDataToLeft() {
      this.choosePostTable = this.handleConcatArr(this.choosePostTable, this.checkedPostRight)
      this.handleRemoveTabList(this.checkedPostRight, this.nochoosePostTable)
      this.checkedPostRight = []
    },

    handleConcatArr(selectArr, nowSelectData) {
      let arr = []
      arr = arr.concat(selectArr, nowSelectData)
      return arr
    },
    handleRemoveTabList(checkArr, originalArr) {
      for (const item of checkArr) {
        if (originalArr.indexOf(item) > -1) {
          this.$nextTick(() => {
            originalArr.splice(originalArr.indexOf(item), 1)
          })
        }
      }
    },
    handleCheckArrAllChange(data) {
      let obj = {}
      let authType = 4
      let arr = data.filter((item) => {
        if (typeof item == 'string') {
          return item
        }
      })
      let newArr = arr.map((item) => {
        let data = {}
        data.typeId = item
        data.grant = true
        return data
      })
      obj.authType = authType
      obj.typeDTOList = newArr
      this.typesAttrData = obj
    }
  },
  setup(props) {
    const state = reactive({
      defaultProps: {
        children: 'children',
        label: 'menuName',
        id:'menuCode',
        disabled:'disabled'
      },
      value1: null,
      value: '全部企业',
      options1: [
        { label: '可用', value: '0' },
        { label: '禁用', value: '1' },
        { label: '全部状态', value: null }
      ],
      options: [
        { label: '品牌企业', value: '品牌企业' },
        { label: '商家企业', value: '商家企业' },
        { label: '全部企业', value: '全部企业' }
      ],
      tableData: [],
      total: 1000,
      currentPage: 1,
      pageSize: 10,
      dialogVisible: false,
      editDialog: false,
      staffDialog: false,
      addStaffDialog: false,
      transferDia:  false,
      postCode:'',
      form: {
        stationName: '',
        // businessType: '',
        station: ''
      },
      formEidt: {
        stationName: '',
        // businessType: '',
        station: ''
      },
      rules: {
        stationName: [
          { required: true, message: '请输入岗位名称', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ],
        businessType: [{ required: true, message: '请选择企业类型', trigger: 'change' }]
      },
      rules1: {
        stationName: [
          { required: true, message: '请输入岗位名称', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ]
      },
      input3: '',
      menuList: [
        {
          id: 1,
          label: '首页',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1'
                },
                {
                  id: 10,
                  label: '三级 1-1-2'
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: '用户',
          children: [
            {
              id: 201,
              label: '员工管理'
            },
            {
              id: 202,
              label: '岗位列表'
            }
          ]
        },
        {
          id: 3,
          label: '系统配置',
          children: [
            {
              id: 5,
              label: '权限配置',
              children: [
                {
                  id: 501,
                  label: '菜单配置'
                },
                {
                  id: 502,
                  label: '菜单配置'
                }
              ]
            },
            {
              id: 6,
              label: '二级 2-2'
            }
          ]
        }
      ],
      initMenuList: [],
      authList:[],
      btnCheckAll:false,
      attrCheckAll:false,
      isBtnIndeterminate:true,
      isAttrIndeterminate:true,
      btnList:[],
      attrList:[],
      staffDetailTable: [],
      chooseTable: [
        { num: '001', name: '张三', post: '测试', phone: '13311222211' },
        { num: '001', name: '张三', post: '测试', phone: '13311222211' },
        { num: '001', name: '张三', post: '测试', phone: '13311222211' },
        { num: '001', name: '张三', post: '测试', phone: '13311222211' },
        { num: '001', name: '张三', post: '测试', phone: '13311222211' },
        { num: '001', name: '张三', post: '测试', phone: '13311222211' },
        { num: '001', name: '张三', post: '测试', phone: '13311222211' },
        { num: '001', name: '张三', post: '测试', phone: '13311222211' },
        { num: '001', name: '张三', post: '测试', phone: '13311222211' }
      ],
      nochooseTable: [
        { num: '001', name: '张三', post: '测试', phone: '13311222211' },
        { num: '001', name: '张三', post: '测试', phone: '13311222211' },
        { num: '001', name: '张三', post: '测试', phone: '13311222211' },
        { num: '001', name: '张三', post: '测试', phone: '13311222211' },
        { num: '001', name: '张三', post: '测试', phone: '13311222211' },
        { num: '001', name: '张三', post: '测试', phone: '13311222211' },
        { num: '001', name: '张三', post: '测试', phone: '13311222211' },
        { num: '001', name: '张三', post: '测试', phone: '13311222211' },
        { num: '001', name: '张三', post: '测试', phone: '13311222211' }
      ],
      postName: '',
      choosePostTable:  [],
      nochoosePostTable:  [],
      functionPermission:[]
    })
    const search = () => {
      getTablePost()
    }

     const handleSelectionChange = (data) => {
       state.postCode = data
     }
    const getTablePost = async () => {
      const { data } = await getPostPage({ num: state.currentPage, size: state.pageSize,enable:state.value1, postName: state.input3 })
      console.log(data)
      data.data.forEach((item) => {
        if (item.enable === 0) {
          item.enable = true
        }
        if (item.enable === 1) {
          item.enable = false
        }
      })
      state.tableData = data.data
      state.total = data.total
      console.log(data)
    }

      
    // const deletePost = async (id) => {
    //   const res = await delPost({ code: id })
    //   if (res.code === 200) ElMessage({ type: 'success', message: '删除成功!' })
    //   window.location.reload()
    //   console.log(res)
    // }
    // const reqTree = async () => {
    //   const res = await getPerTree()
    //   state.menuList = res.data
    //   console.log(res)
    // }
    const eidtPost = async (code) => {
      console.log(typeof code)
      state.editDialog = !state.editDialog
      const res = await getPerTree({ grantCode: code, systemId: 0 })
      if (res.code === 200) {
        state.menuList = res.data
        console.log(res)
      }
    }
    const showStaff = async (row) => {
      state.staffDialog = true
      state.postName = row.postName
      const res = await getEmployee({ postCode: row.postCode })
      if (res.code === 200) {
        state.staffDetailTable = res.data.data
        console.log(res)
      }
      console.log(row)
    }
    const addStaff = async (code) => {
      state.addStaffDialog = true
      console.log(code)
    }
    const handleNodeClick = async (data) => {
      const res1 = await viewRight({ code: data.menuCode,state: 1,type: 1 })
      state.btnList = []
      state.attrList = []
      state.authList = res1.data
      state.authList.data.forEach((item)=>{
          item.btn.forEach((it)=>{
            state.btnList.push(it)
          })
          item.attr.forEach((it)=>{
            state.attrList.push(it)
          })
      })
      console.log(res1)
    }
    const addPost = async () => {
      state.dialogVisible = true
      const res = await getPerTree({ systemId: 0 })
      console.log(res)
      state.initMenuList = res.data
    }

    const distribution = async () =>{
      let codes = []
      state.nochoosePostTable.forEach((item) => {
        let code ={
          code :  item.employeeCode
        }
        codes.push(code)
      })

    let code1 = {
      code:state.postCode
    }
      let data ={
        code: code1,
        codes:codes
      }
      const res = await distributionEmployee( data )
       if (res.code === 200) {
            ElMessage({ type: 'success', message: '员工分配成功!' })
             state.transferDia = false
       }else{
         ElMessage({ type: 'error', message: '员工分配失败!' })
       }
    }
    const addPostEmployee = async () => {
       state.dialogVisible = false
      state.nochoosePostTable = []
      state.transferDia = true
      const res = await getEnterprise()
      if (res.code === 200) {
        state.choosePostTable = res.data.data
        console.log(res)
      }
    }


    const enablePost = async (data) => {
        const res = await postEnable({ code: data })

    }
    onMounted(() => {
      // getPostPage({ num: props.currentPage, size: props.pageSize }).then((res) => {
      //   console.log(res)
      // })
      console.log(props)
      getTablePost()
      // reqTree()
    })
    return {
      ...toRefs(state),
      search,
      // handleSelectionChange,
      // deletePost,
      eidtPost,
      addStaff,
      showStaff,
      handleNodeClick,
      getTablePost,
      addPost,
      addPostEmployee,
      enablePost,
      distribution
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // flex: 0 0 60px;
}
.el-switch {
  // border: 1px solid #409eff;
  // border-radius: 10px;
  /deep/ .el-switch__core {
    background: #fff;
    &::before {
      content: '禁用';
      color: #b4b4b4;
      position: absolute;
      font-size: 12px;
      transform: scale(0.75);
      left: 14px;
      top: -1px;
    }
  }
  &.switch-is-actived {
    /deep/ .el-switch__core {
      border: 1px solid #31c0fd;
      &::before {
        content: '可用';
        color: #31c0fd;
        position: absolute;
        font-size: 12px;
        transform: scale(0.75);
        left: -1px;
        top: -2px;
      }
    }
    /deep/.el-switch__action {
      background-color: #31c0fd;
    }
  }
}
/deep/.el-switch__action {
  position: absolute;
  left: 2px;
  top: 3px;
  width: 12px;
  height: 12px;
  color: #b4b4b4;
}
.el-icon-s-operation,
.iconbianji,
.iconshanchu1,
.iconjia,
.iconicon_public_crumbs {
  color: #31c0fd;
  cursor: pointer;
}
/deep/.el-dialog {
  position: fixed;
  padding: 20px !important;
  right: 0;
  height: 100%;
  /deep/.el-dialog__body {
    padding: 10px !important;
  }
  .el-dialog__header {
    border-bottom: 1px solid #ccc;
  }
  .step {
    display: inline-block;
    margin: 0 20px;
    font-size: 26px;
    line-height: 48px;
    i {
      display: inline-block;
      width: 48px;
      height: 48px;
      background-color: #31c0fd;
      border-radius: 50%;
      text-align: center;
    }
  }
}
.postForm {
  margin-top: 20px;
  .permission {
    height: 90%;
    /deep/.el-form-item__content {
      width: 100%;
      height: 100%;
      // display: flex;
      /deep/.treeNode {
        width: 250px;
        height: 100%;
        border: 1px solid #ccc;
        border-top-left-radius: 10px;
      }
    }
  }
}
.el-form-item {
  box-sizing: border-box;
  max-height: 800px;
  /deep/.el-form-item__content {
    width: 100%;
  }
}
.el-select,
.el-input {
  width: 250px;
  height: 40px;
}
.iconfangdajing {
  cursor: pointer;
}
.father {
  display: flex;
  padding: 10px;
  p {
    margin-right: 10px;
    flex: 0 0 80px;
  }
  .left {
    width: 250px;
    height: 400px;
    border: 1px solid #ccc;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-right: 20px;
    p {
      padding: 10px;
      color: #b4b4b4;
    }
  }
  .right {
    & > p {
      margin: 10px 0;
    }
    & > div {
      & > p {
        margin: 10px 0;
        color: #b4b4b4;
      }
    }
  }
}
/deep/.el-icon-caret-right:before {
  content: '';
}
.addStaff {
  // display: flex;
  // height: 100%;
  overflow: auto !important;
  /deep/.el-dialog__body {
    padding: 20px;
  }
}
// .btn {
//   display: flex;
//   flex-direction: column;
// }
</style>
